<template>
    <div id="main">
        <!-- 头部区域 -->
        <div class="header">
            <span @click="$router.back(-1)">
                <van-icon name="arrow-left" />
            </span>
            <h2>个人信息</h2>
        </div>
        <!-- 个人账号修改 -->
        <div class="account">
            <van-cell title="头像" size="large" is-link center>
                <van-uploader :after-read="afterRead">
                    <van-image round width="60px" height="60px" :src="user.headerimg" />
                </van-uploader>
            </van-cell>
            <van-cell title="昵称" size="large" is-link value='这是昵称' to='/changeusername' />
            <van-cell title="支付设置" is-link />
            <van-button type="default" size="large" color="#f7d247">切换账号</van-button>
            <van-button type="default" size="large" color="#e7e7e7" @click="onOutUser">退出登录</van-button>
            
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{}
    },
    computed:{
        user(){
            return this.$store.getters.getUser
        }
    },
};
</script>
<style lang="scss" scoped>

#main {
    width: 96%;
    margin: 0 auto;
    background: #f4f4f4;
    position: relative;

    // header
    .header {
        height: 50px;
        background: white;
        border-bottom: 10px;

        h2 {
            text-align: center;
            font-size: 28px;
        }

        .van-icon {
            position: absolute;
            left: 5px;
            top: 8px;
        }
    }

    // 个人信息和安全
    .account {
        margin-bottom: 20px;

        .van-cell,
        .van-button {
            margin-bottom: 10px;

        }


    }
}
</style>